const moveBar = document.querySelector(".move-bar");
const noteEl = document.querySelector(".note");

moveBar.addEventListener("mousedown", function (e) {
  const x = e.clientX,
    y = e.clientY;

  const rect = moveBar.getBoundingClientRect();
  const ex = rect.left;
  const ey = rect.top;

  const w = document.documentElement.clientWidth;
  const h = document.documentElement.clientHeight;
  const ew = noteEl.offsetWidth;
  const eh = noteEl.offsetHeight;

  const maxLeft = w - ew;
  const maxTop = h - eh;

  function handleMouseMove(e) {
    console.log("鼠标移动");
    const disX = e.clientX - x;
    const disY = e.clientX - y;
    let left = ex + disX;
    let top = ey + disY;

    if (left < 0) {
      left = 0;
    }
    if (left > maxLeft) {
      left = maxLeft;
    }

    if (top < 0) {
      top = 0;
    }
    if (top > maxTop) {
      top = maxTop;
    }

    noteEl.style.left = left + "px";
    noteEl.style.top = top + "px";
  }
  window.addEventListener("mousemove", handleMouseMove);

  function handleMouseUp() {
    console.log("不在监听鼠标移动");
    window.removeEventListener("mousemove", handleMouseMove);
    window.removeEventListener("mouseup", handleMouseUp);
  }

  window.addEventListener("mouseup", handleMouseUp);
});
